<template>
  <div>
    <div>
      <div class="personageheader">
        <div class="personageheader-container">
          <van-image
            round
            width="5rem"
            height="5rem"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="personageheader-gotologin" >
            <p @click="gotologin" v-show="!tokens">立即登录</p>
            <p @click="cleartoken" v-show="tokens">退出登录</p>
            <p>积分: 0</p>
          </div>

        </div>
      </div>
      <van-notice-bar
        left-icon="volume-o"
        background="white"
        color="red"
        text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
      />
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      token: this.$store.state.token || '',
      tokens:false
    }
  },
  methods: {
    gotologin() {
      this.$router.push("/login");
      Toast('请登录账号');
    },
    cleartoken(){
      this.$store.commit('cleartoken')
       this.$router.push("/");
       Toast('已退出');
    }
  },
 mounted(){
   if(this.token !=''){
     this.tokens=true
   }else{
     this.tokens=false
   }
 }
};
</script>
<style lang="scss">
.personageheader {
  width: 100%;
  height: 12rem;
  background-color: #c1b18f;
  box-sizing: border-box;
  padding: 3rem 0.3rem;
  .personageheader-container {
    display: flex;
    align-items: center;
    color: white;
    .personageheader-gotologin {
      width: 100%;
      margin-left: 0.5rem;
    }
    .personageheader-gotologin p:nth-child(2) {
      width: 40%;
      background-color: rgba(182, 163, 125, 0.5);
    }
  }
}
</style>